<%--
  Created by IntelliJ IDEA.
  User: 30822
  Date: 2023/6/10
  Time: 13:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link href="${pageContext.request.contextPath}/WEB-INF/css/styles.css"  rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/layui-v2.8.4/layui/css/layui.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui-v2.8.4/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
</head>
<script>
    function Out(){
        window.location.href="${pageContext.request.contextPath}/user/logout";
    }
    function toUserInfo(url){

        $("#main").load(url);
    }
    function toUserClass(url){

        $("#main").load(url);
    }
    function toMyClass(url){

        $("#main").load(url);
    }
</script>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">健身房管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="https://unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    ${sessionScope.userInfo.userName}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:Out();">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;" > 个人信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:toUserInfo('${pageContext.request.contextPath}/user/ToUserInfo');">个人信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">课程管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:toUserClass('${pageContext.request.contextPath}/class/ToUserClass');" id="cclass">报名选课</a></dd>
                        <dd><a href="javascript:toMyClass('${pageContext.request.contextPath}/class/ToMyClass');">我的课程</a></dd>
                        <%--                        <dd><a href="javascript:;">超链接</a></dd>--%>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">会员信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">会员信息</a></dd>
                        <%--                        <dd><a href="javascript:;">超链接</a></dd>--%>
                    </dl>
                </li>
                <%--                <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>--%>
                <%--                <li class="layui-nav-item"><a href="javascript:;">the links</a></li>--%>
            </ul>
        </div>
    </div>
    <div class="layui-body" id="main">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
<%--            <blockquote class="layui-elem-quote layui-text" style="font-size: 45px">--%>
<%--                ${sessionScope.userInfo.userName}的主页--%>
<%--            </blockquote>--%>
            <div  class= "container-fluid px-4" style="width: 1000px;height:200px ">
                <h1 class="mt-4">我的课程</h1>



                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li>
                    <li class="breadcrumb-item active">我的课程</li>
                </ol>
                <%--    action="${pageContext.request.contextPath}/class/ToUserClass"--%>
                <form action="${pageContext.request.contextPath}/class/ToMyClass" method="post" id="myForm">
                    <div style="display: flex;justify-content: flex-end">
                        <div class="layui-form">
                            <input type="text" name="className" placeholder="请输入课程名" class="layui-input" style="margin-right: 0px;width: 100px">
                            <hr class="ws-space-16">
                        </div>
                        <%--            <input type="submit" class="layui-btn"  lay-submit lay-filter="demo1" style="margin-left: 20px" value="搜索" id="submitBtn">--%>
                        <button class="layui-btn" lay-submit lay-filter="demo1" style="margin-left: 20px">搜索</button>
                    </div>
                </form>

                <div>
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        课程信息表
                        <%--                        <span style="color: red;margin-left: 99px; text-align: center" >${requestScope.msg}测试</span>--%>
                    </div>
                    <table class="layui-hide" id="ID-table-demo-data"></table>
                    <script type="text/html" id="barDemo">
                        <%--                        <div class="layui-clear-space">--%>
                        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="edit">退课</a>
                        <%--                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">选课</a>--%>
                        <%--                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>--%>
                        <%--                        </div>--%>
                    </script>
                    <%--                    <table class="layui-hide" id="ID-table-demo-page"></table>--%>
                    <%--                    <table class="layui-hide" id="ID-table-demo-setRowChecked"></table>--%>
                </div>
                <br><br>
            </div>
            <br><br>
        </div>
    </div>
    <%--    <div class="layui-footer">--%>
    <%--        <!-- 底部固定区域 -->--%>
    <%--        底部固定区域--%>
    <%--    </div>--%>
</div>
<%--我的课程--%>

<script>



    layui.use('table', function(){
        var table = layui.table;
        let data = getData();
        <%--//通过 Ajax 获取表格数据--%>
        <%-- $.ajax({--%>
        <%--    url: '${pageContext.request.contextPath}/class/ToUserClassData',--%>
        <%--     type: 'GET',--%>
        <%--     dataType: 'json',--%>
        <%--     success: function(data){--%>
        //将数据传递给 layui.table.render() 方法，生成表格数据
        table.render({
            elem: '#ID-table-demo-data',
            data: data,
            page:true,
            cols: [[
                {field: 'id', title: '编号', width: 80}
                ,{field: 'className', title: '名称', width: 120}
                ,{field: 'classBegin', title: '时间', minWidth: 160,sort: true}
                ,{field: 'classHour', title: '课时', width: 80,sort: true}
                ,{field: 'classTime', title: '时长', width: 80,sort: true}
                ,{field: 'classCoach', title: '教练', width: 100}
                ,   {
                    title: '操作',
                    toolbar: '#barDemo',
                    width:80
                }
            ]]
            //,skin: 'line' // 表格风格
            //,even: true
            ,page: true // 是否显示分页
            ,limits: [3, 5, 10]
            ,limit: 5 // 每页默认显示的数量
        });
    });

    layui.use('table', function(){
        var table = layui.table;
        table.on('tool(ID-table-demo-data)', function(obj) {
            let data = obj.data; //当前行的数据对象
            let id = data.id; //获取当前行的id值
            // let msg= getMsg();
            // let code= getCode();
            if (obj.event === 'edit') { //删除

                layer.confirm('确定退选此课程吗?', function (index) {
                    console.log("rowId" + id)

                    $.ajax({
                        type: 'POST',
                        // dataType: 'json',
                        url:'${pageContext.request.contextPath}/class/DelChoose',
                        data:{id},
                        async:false,
                        success:function (result){
                                layer.msg('退课成功', {icon: 1});
                                toMyClass('${pageContext.request.contextPath}/class/ToMyClass');
                            // else{
                            //     layer.msg('ce', {icon: 2});
                            // }
                            // }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log(textStatus, errorThrown);
                            layer.msg('退课失败', {icon: 2});
                        }
                    })
                    // obj.del(); //删除对应行
                    layer.close(index);
                });
            }
        })
    });

            function getData() {
                let jsonData;
                jsonData = ${requestScope.myCourseList}
                return jsonData;
            }
    <%--layui.use(['form'], function(){--%>

    <%--    const form = layui.form;--%>
    <%--    // var data = form.val('myForml');--%>
    <%--    var data = $('#myForm').serialize();--%>
    <%--    form.on('submit(demo1)', function(){--%>
    <%--        // var data = $('#myForm').serialize();--%>
    <%--        // let className = data.field.className; // 获取表单字段值--%>
    <%--        // console.log(data.field );--%>
    <%--        let className=  data.className;--%>
    <%--        // let className = field.className;--%>

    <%--        &lt;%&ndash;toMyClass("${pageContext.request.contextPath}/class/ToMyClass?className="+className);&ndash;%&gt;--%>
    <%--        // 此处可执行 Ajax 等操作--%>
    <%--        // …--%>
    <%--        //发送修改请求--%>
    <%--        $.ajax({--%>
    <%--            type: "POST",--%>
    <%--            url: '${pageContext.request.contextPath}/class/ToMyClass',--%>
    <%--            data: {className},--%>
    <%--            // cache: false, // 禁用缓存--%>
    <%--            success: function(){--%>
    <%--                toMyClass("${pageContext.request.contextPath}/class/ToMyClass?className="+className);--%>
    <%--            },--%>
    <%--            error: function(){--%>

    <%--            }--%>
    <%--        });--%>

    <%--        return false; // 阻止默认 form 跳转--%>
    <%--    });--%>
    <%--});--%>



</script>
<script src="${pageContext.request.contextPath}/layui-v2.8.4/layui/layui.js"></script>
</body>
</html>
